<template>
	<div>
		<div class="top">
			<Row :gutter="10" justify="center">
				<Col span="4">
					<Input v-model="keyWord" placeholder="输入姓名/手机号码/SN号" />
				</Col>
				<Col span="4">
                    <Select placeholder="请选上传方式" v-model="autoFlag">
						<Option v-for="item in GLOBAL.autoFlagOptionList" :value="item.value" :key="item.value">{{ item.text }}</Option>
					</Select>
				</Col>
				<Col span="16">
                    <span class="ml20">测量日期:</span>
					<DatePicker class="ml20" v-model="dateRange" type="datetimerange" placement="bottom-start" placeholder="请选择测量时间范围"></DatePicker>
                    <Button class="ml20" type="primary" @click="testPageQueryCopdList">搜索</Button>
					<Button class="ml20" type="default" plain @click="reset">清空</Button>
				</Col>
			</Row>
		</div>
		<Table class="table" :loading="loading" :columns="tableHeaders" :data="items">
            <template slot-scope="{ row }" slot="sex">
                <span v-if="Number(row.sex)===1">男</span>
                <span v-else-if="Number(row.sex)===2">女</span>
                <span v-else>-</span>
            </template>
            <template slot-scope="{ row }" slot="autoFlag">
                <span v-if="Number(row.autoFlag)===1">自动</span>
                <span v-else-if="Number(row.autoFlag)===0">手动</span>
                <span v-else>-</span>
			</template>
            <template slot-scope="{ row }" slot="birthday">
                <span>{{row.birthday | AGE}}</span>
			</template>
		</Table>
		<Row class="pagination">
            <Col align="right">
                <Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
            </Col>
        </Row>
	</div>
</template>

<script>
import { testPageQueryCopdList } from '@api/test.js'
import moment from 'moment'
export default {
	data() {
		return {
			tableHeaders: [
				{
                    align:'left',
					width: 130,
					title: '档案号',
					key: 'customerFileNumber',
				},
				{
                    align:'left',
					width: 100,
					title: '姓名',
					key: 'customerName',
				},
				{
					title: '性别',
					slot: 'sex',
					width: 130,
                    align:'left',
				},
                {
                    align:'left',
                    title: '年龄',
					width: 130,
					slot: 'birthday',
                },
                {
					title: '手机号',
                    key: 'mobile',
					width: 130,
                },
                {
                    align:'left',
					width: 130,
					title: '上传方式',
					slot: 'autoFlag',
                },
                {
                    align:'left',
					title: 'SN号',
					width: 130,
					key: 'snCode',
                },
                {
                    align:'left',
					title: '测试时间',
					key: 'testTime',
					width: 170
                },
                {
                    align:'right',
					width: 170,
					title: 'FEV1(%)',
					key: 'testFev1',
                },
				{
					width: 170,
                    align:'right',
                    title: 'FVC(%)',
					key: 'testFvc',
                },
                {
					title: ' ',
					key: '',
                },
                
			],
			data6: [
				
            ],
            
            items: [],
			loading: false,
			page: 1,
			pageSize: 10,
            totalNum: 0,

            keyWord: '',
            autoFlag: '',
            beginTime: '',
            endTime: '',
            dateRange: [],
		}
	},
	mounted() {
        this.testPageQueryCopdList()
	},
	methods: {
        reset() {
            this.keyWord = '',
            this.autoFlag = '',
            this.dateRange = []
        },
        modal(res, title) {
			if (res.code === '0') {
				this.$Modal.success({
					title: title || this.alertTitle,
					content: res.data
				})
			} else {
				this.$Modal.warning({
					title: title || this.alertTitle,
					content: res.errMsg
				})
			}
		},
		pageChange(page) {
			this.page = page
			this.testPageQueryCopdList()
			console.log('page>', page)
		},
		testPageQueryCopdList() {
			const {dateRange, keyWord,autoFlag, page, pageSize, loading } = this
			if (loading) return
            this.loading = true
            const [beginTime, endTime] = dateRange;
            const obj = {
                beginTime,
                endTime,
                keyWord,
                autoFlag,
                beginTime,
                page,pageSize,
            }
            if (beginTime) {
                obj.beginTime = moment(beginTime).format('YYYY-MM-DD HH:mm:ss')
            }
            if (endTime) {
                obj.endTime = moment(endTime).format('YYYY-MM-DD HH:mm:ss')
            }
			testPageQueryCopdList(obj)
				.then(res => {
					this.loading = false
					if (res.code === '0') {
						const { currentPage, isMore, items, pageSize, totalNum, totalPage } = res.data
                        ;(this.items = items), (this.page = currentPage), (this.totalNum = totalNum)
						console.log('this.items->', this.items)
					} else {
						this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
						})
					}
				})
				.catch(err => {
					this.loading = false
				})
		},
		show(index) {
			this.$Modal.info({
				title: 'User Info',
				content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
			})
		},
		remove(index) {
			this.data6.splice(index, 1)
		},
	}
}
</script>
<style>
/* .ivu-table-wrapper{
    max-width: 100%;
    overflow-y: scroll !important;
} */
.top {
	margin-bottom: 20px;
}
.page {
	margin-top: 20px;
}
.check {
}
</style>
